<!--课程简介-->
<style>
  #course-intro-box li {
    border: none;
  }
</style>
<div id="course-intro-box">
  <div class="es-piece">
    <div class="piece-header">课程介绍</div>
    <div class="piece-body p-lg clearfix">
      <span class="empty" v-if="isEmpty(course.intro)">该课程暂无简介</span>
      <div v-html="course.intro"></div>
    </div>
  </div>
  <div class="es-piece">
    <div class="piece-header">课程目标</div>
    <div class="piece-body">
      <ul class="piece-body-list">
        <span class="empty" v-if="isEmpty(course.goal)">未设置目标</span>
        <li v-for="g in split_(course.goal)" v-show="!isEmpty(g)">
          <i class="es-icon es-icon-dot mrm"></i>{{g}}
        </li>
      </ul>
    </div>
  </div>
  <div class="es-piece">
    <div class="piece-header">适合人群</div>
    <div class="piece-body">
      <ul class="piece-body-list">
        <span class="empty" v-if="isEmpty(course.toPeople)">未设置人群</span>
        <li v-for="g in split_(course.toPeople)" v-show="!isEmpty(g)">
          <i class="es-icon es-icon-dot mrm"></i>{{g}}
        </li>
      </ul>
    </div>
  </div>
</div>
<script>
  var CIntro = new Vue({
    el: '#course-intro-box',
    data: {
      course: infoVm.course
    },
    methods: {
      isEmpty: function (val) {
        return val == null || val.trim().length===0;
      },
      split_: function (val) {
        if (!this.isEmpty(val)) {
          return val.split(/，|,| |;|；|。|\.|\r\n/);
        }
        return [];
      }
    }
  });
</script>